<template>
  <div class="m-view-dialogSrmMaterialsPurchaser m-window" v-if="dialogVisible">
    <el-dialog
    :title="`${this.plantName} - ${this.matgroupName}(${this.matgroupCode})`"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="50%"
    v-dialogDrag
    append-to-body
    custom-class="m-view-dialogSrmMaterialsPurchaser"
    :close-on-click-modal="false"
    :close-on-press-escape="false">

      <el-form ref="form" label-width="60px">
        <el-row :gutter="10" class="m-condition">
          <el-col :span="9">
            <el-form-item label="采购员">
              <el-input
                value-key="id"
                v-model.trim="formSearch.oaNum"
                placeholder="请输入工号/OA号/名称"
                clearable
                maxlength="20">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="5">
            <el-button type="primary" v-if="!isAutoRule" @click="search(true, 'getMaterialsOfPurchaser')">查询</el-button>
            <el-button type="primary" v-if="isAutoRule" @click="search(true, 'getMaterialsOfPurchaserAutoRule')">查询</el-button>
          </el-col>
          <el-col :span="7">
            <el-button type="primary" v-if="!isAutoRule" @click="deletePurchaser('deletePurchaserMaterials')">从物料组移除</el-button>
            <el-button type="primary" v-if="isAutoRule" @click="deletePurchaser('deleteAutoSendLeadfletRule')">从物料组移除</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div class="m-agTableModel">
        <ag-grid-vue
          ref="agGridComponent"
          class="m-agTableModel ag-theme-balham"
          :gridOptions="gridOptions"
          :columnDefs="columnDefs"
          :isColFit="true"
          v-loading="loading"
        ></ag-grid-vue>
      </div>
      <div class="m-pageModel m-pBottom">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-sizes="[30, 50, 100, 150, 200]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import agGridComponents from "@/components/agGridComponents.js";
import _Api from "@/api";
import localeText from "@/i18n/agGridText";

/**
 * @group dialogSrmMaterialsPurchaser
 * 物料组对应的派单员配置的弹窗
 */
export default {
  name: 'dialogSrmMaterialsPurchaser',
  components:{
		agGridComponents
	},
  props:{
    //显示弹框
    dialogVisible: {
      //类型布尔值
      type: Boolean,
      //默认值是true
      default: true
    },
    //工厂代码
    plantCode:{
      //类型String
      type: String,
      //默认为空串
      default: ''
    },
    //工厂名字
    plantName:{
      //类型String
      type: String,
      //默认为空串
      default: ''
    },
    //物料编码
    matgroupCode:{
       //类型String
      type: String,
      //默认为空串
      default: ''
    },
    //物料名称
    matgroupName:{
       //类型String
      type: String,
      //默认为空串
      default: ''
    },
    //是否为自动派单规则
    isAutoRule:{
      //类型布尔值
      type: Boolean,
      //默认值是true
      default: true
    }
  },
  data(){
    return {
      formSearch:{//查询表
				oaNum: ''
			},
			rowData: [], // 表格数据
			//表格参数
			gridOptions: '',
			columnDefs: [],
      //页脚参数
			pageInfo: {
				pageSize: 30,
				currentPage: 1,
			},
			total: 0,
			//加载参数
      loading: false,//页面的
      title: '',
    }
  },
  beforeMount () {
		this.gridOptions = {
		context: {
        componentParent: this
      },
      rowSelection: "multiple",
      enableColResize: true,
      localeText: localeText,
      suppressRowClickSelection: true,//单元格选中,false为选中整行
		};
		this.columnDefs = [
			{	headerName: "采购员", field: "purcheaserName", width: 200, headerCheckboxSelection: true, checkboxSelection: true },
      { headerName: "工号", field: "sapNum", width: 200 },
      { headerName: "OA号", field: "oaNum", width: 200 },
		];
  },
  methods:{
    /**
     * @vuese
     * 查询方法
     * 
     * @arg isClick:参数是布尔值， true就是点击触发，false就是非点击触发, InterfaceName：接口名
     */
    search(isClick, interfaceName){
      this.loading = true;
      this.pageInfo.currentPage = isClick ? 1 : this.pageInfo.currentPage;
      let param = {
        ...this.formSearch,
        plantCode: this.plantCode,
        matgroupNo: this.matgroupCode
      };
      _Api[interfaceName](param)
      .then(res => {
        this.loading = false;
        if (res.data.code == 1) {
          this.rowData = res.data.rows;
          this.total = res.data.total
          this.$refs.agGridComponent.gridOptions.api.setRowData(this.rowData);
        } else {
          this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
        }
      })
      .catch(err => {
        this.loading = false;
        this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
      });
    },

    /**
		 * @vuese
		 * 移除派单员物料方法
     * 
     * @arg InterfaceName：接口名
		 */
		deletePurchaser(interfaceName){
			let row = this.$refs.agGridComponent.gridOptions.api.getSelectedRows();
			if(row.length <= 0){
				this.$alert("提示：请至少选择一位采购员", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"					
				});
				return
			}

			let param = {
				ids: row.map(v=>v.id),
			}
			this.$confirm('是否将这些采购员从物料组中移除', "消息提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				distinguishCancelAndClose: true
			}).then(() => {
				this.loading = true;
				_Api[interfaceName](param)
        .then(res => {
          this.loading = false;
          if (res.data.code == 1) {
            this.$message({
              message: '移除成功！',
              type: "success"
            });
            //刷新
            let InterfaceName = this.isAutoRule?'getMaterialsOfPurchaserAutoRule':'getMaterialsOfPurchaser';
            if(this.dialogVisible)
              this.search(true, InterfaceName)
          } else {
            this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
        });
			})
		},

    /**
     * @vuese
     * 改变页脚总条数方法
     */
    handleSizeChange (val) {
      this.pageInfo.pageSize = val;
      this.pageInfo.currentPage = 1;
      this.search();
    },

    /**
     * @vuese
     * 翻页方法
     */
    handleCurrentChange (val) {
      this.pageInfo.currentPage = val;
      this.search();
    },

    /**
     * @vuese
     * 关闭对话框方法
     */
    handleClose() {
      this.$emit("dialogClose", false);
    },
  },
  watch:{
    matgroupCode(val){
      let InterfaceName = this.isAutoRule?'getMaterialsOfPurchaserAutoRule':'getMaterialsOfPurchaser';
      if(this.dialogVisible)
        this.search(true, InterfaceName)
    }
  }
}
</script>

<style lang="less">
.m-view-dialogSrmMaterialsPurchaser{
  .el-form-item{
    margin-bottom: 0;
  }
}
</style>